<template>
  <el-dialog class="public-dialog" :title="title" width="928" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <!-- <div class="flex">
      <div class="flex-1">
        <el-date-picker
          v-model="dayRange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          valueFormat="YYYY-MM-DD"
          class="w-[320px] mr-[8px]"
          :shortcuts="shortcuts"
        />
        <el-button type="primary" @click="query()"> 查询 </el-button>
      </div>

      <el-radio-group v-model="radio" @change="radioChange">
        <el-radio-button label="表格展示" />
        <el-radio-button label="趋势图展示" />
      </el-radio-group>
    </div>
    <div class="grid grid-cols-2 gap-y-2 py-[8px] px-[16px] mt-[8px] bg-[#EAF3FF]">
      <VText v-for="item in formColumn" :key="item.key" :title="item.label" :value="formData?.[item.key] || '-'" />
    </div>
    <div class="echart pt-[8px]">
      <div v-if="radio == '表格展示'">
        <div class="grid grid-cols-10 day-table">
          <div v-for="item in formData.asin_sales_daily" :key="item.payment_date">
            <div class="header">{{ item.payment_date || "-" }}</div>
            <div class="value">{{ item.sales_num }}</div>
          </div>
        </div>
      </div>
      <div id="echart-view" v-else></div>
    </div> -->
    <div id="echart-view"></div>
    <template #footer>
      <el-button type="primary" :loading="loading" @click="handleClose(false)"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus"
// import { salesTrend } from "@/api/plan"

import { ratioSalesQty } from "@/api/amazon"

const modelValue = ref(false)
import * as echarts from "echarts"
const data = reactive({
  title: "",
  formData: {},
  loading: false,
  dayRange: [],
})
const radio = ref("表格展示")
const radioChange = (e) => {
  if (e == "趋势图展示") {
    initEcharts(formData.value.asin_sales_daily)
  } else {
    console.log(formData.value)
  }
}
const { title, formData, dayRange, loading } = toRefs(data)
const formColumn = [
  { label: "国家", key: "site_code" },
  { label: "SKU", key: "sku" },
  { label: "ASIN", key: "asin" },
  { label: "自定义SKU", key: "custom_sku" },
  { label: "总销量", key: "total_sales" },
]

const handleClose = () => {
  modelValue.value = false
  radio.value = "表格展示"
  formData.value = {}
}
const baseAsinId = ref("")
import { shortcuts } from "@/components/XForm/config.js"
import { parseTime } from "@/utils/ruoyi"
const open = (type, row) => {
  title.value = type == "week" ? "周销量对比" : "月销量对比"

  modelValue.value = true
  console.log(type, row)
  // let day = shortcuts.find((v) => v.text == "最近一个月")?.value()
  // day = day.map((v) => parseTime(v, "{y}-{m}-{d}"))
  // dayRange.value = day
  // baseAsinId.value = id
  // query()
  let params = {
    sku: row.sku,
    platform_sku: row.platform_sku,
    shop_id: row.shop_id,
    asin: row.asin,
    platform_id: row.platform_id,
    is_site: 0,
  }
  ratioSalesQty(params).then((res) => {
    // console.log(100998)

    // console.log(res)
    initEcharts(res.data[type])
  })
}
const query = () => {
  // ratioSalesQty
  // ratioSalesQty({ base_asin_id: baseAsinId.value, payment_date: { start: dayRange.value?.[0], end: dayRange.value?.[1] } }).then((res) => {
  //   res.data.asin_sales_daily = res.data.asin_sales_daily.reverse()
  //   res.data.total_sales = String(res.data.total_sales)
  //   formData.value = res.data
  // })
}

const initEcharts = async (lists) => {
  console.log(lists)
  let chartDom = document.getElementById("echart-view")
  let myChart = echarts.init(chartDom)
  // let list = [...lists].reverse()

  let option
  option = {
    tooltip: { trigger: "axis" },
    grid: { left: "2%", right: "2", bottom: "2%", containLabel: true },
    xAxis: {
      type: "category",
      data: lists[0],
    },
    yAxis: { type: "value" },
    dataZoom: [
      // { type: "inside", start: 0, end: 10 },
      // { start: 0, end: 10 },
    ],
    series: [
      {
        data: lists[1],
        type: "line",
        smooth: true,
      },
    ],
  }
  option && myChart.setOption(option)
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped>
#echart-view {
  height: 400px;
}

.echart {
  width: 100%;
  height: 300px;
}

.day-table {
  border-top: 1px solid #eff3fe;
  border-left: 1px solid #eff3fe;
  * {
    line-height: 48px;
    text-align: center;
    border-bottom: 1px solid #eff3fe;
    border-right: 1px solid #eff3fe;
  }
  .header {
    background: #f6faff;
  }
  .value {
    color: #3487ff;
  }
}
</style>
